<template>
	<view class="message" :style="'height:'+ screenHeight +'px !important;'">
		<view class="message-head">
			<view class="head">
				<view class="head-title">动态管理</view>
				<view class="search">
					<uni-icons type="search" color="#cfc7c6"></uni-icons>
					<input type="text" value="" placeholder="开始搜索..." />
				</view>
			</view>
		</view>
		<view class="message-content">
			<view class="content-order">
				<view class="order-title">
					<view class="title-bold">我的订单</view>
					<view class="title-gray">
						<text>查看全部订单</text>
						<uni-icons type="arrowright" size="12" color="#b3afae"></uni-icons>
					</view>
				</view>
				<view class="order-block">
					<view class="order-icon-btn">
						<image src="../../static/image/icon/daifukuan.png" mode=""></image>
						<view class="">待付款</view>
					</view>
					<view class="order-icon-btn">
						<image src="../../static/image/icon/daifahuo.png" mode=""></image>
						<view class="">待发货</view>
					</view>
					<view class="order-icon-btn">
						<image src="../../static/image/icon/daifahuo.png" mode=""></image>
						<view class="">待收货</view>
					</view>
					<view class="order-icon-btn">
						<image src="../../static/image/icon/pingjia.png" mode=""></image>
						<view class="">评价</view>
					</view>
					<view class="order-icon-btn">
						<image src="../../static/image/icon/shouhou.png" mode=""></image>
						<view class="">退款/售后</view>
					</view>
				</view>
				<view class="order-wuliu">
					<view class="wuliu-title">
						<view class="title-gray">最新物流</view>
						<view class="title-gray">07-04</view>
					</view>
					<view class="wuliu-content">
						<view class="wuliu-content-img">
							<image src="../../static/image/photo.jpg" mode=""></image>
						</view>
						<view class="wuliu-content-text">
							<view class="wuliu-content-icon">
								<image src="../../static/image/icon/xiadan.png" mode=""></image>
								<text>已下单</text>
							</view>
							<view class="title-gray">
								商品已下单
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content-order">
				<view class="order-title">
					<view class="title-bold">我的接单</view>
					<view class="title-gray">
						<text>查看全部接单</text>
						<uni-icons type="arrowright" size="12" color="#b3afae"></uni-icons>
					</view>
				</view>
				<view class="order-block">
					<view class="order-icon-btn">
						<image src="../../static/image/icon/shoukuan.png" mode=""></image>
						<view class="">待收款</view>
					</view>
					<view class="order-icon-btn">
						<image src="../../static/image/icon/quhuo.png" mode=""></image>
						<view class="">待取货</view>
					</view>
					<view class="order-icon-btn">
						<image src="../../static/image/icon/songhuo.png" mode=""></image>
						<view class="">待送达</view>
					</view>
					<view class="order-icon-btn">
						<image src="../../static/image/icon/pingjia.png" mode=""></image>
						<view class="">评价</view>
					</view>
					<view class="order-icon-btn">
						<image src="../../static/image/icon/shouhou.png" mode=""></image>
						<view class="">退款/售后</view>
					</view>
				</view>
				<view class="order-wuliu">
					<view class="wuliu-title">
						<view class="title-gray">最新物流</view>
						<view class="title-gray">07-04</view>
					</view>
					<view class="wuliu-content">
						<view class="wuliu-content-img">
							<image src="../../static/image/photo.jpg" mode=""></image>
						</view>
						<view class="wuliu-content-text">
							<view class="wuliu-content-icon">
								<image src="../../static/image/icon/xiadan.png" mode=""></image>
								<text>已接单</text>
							</view>
							<view class="title-gray">
								商品已接单
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				screenHeight: '',
			}
		},
		methods: {

		},
		onLoad() {
			this.screenHeight = uni.getSystemInfoSync().windowHeight;
		}
	}
</script>

<style scoped lang="less">
	@import url("../../static/color.less");

	.message {
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;
	}

	.message-head {
		height: 150rpx;
		background-color: #007AFF;
	}

	.head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx;
		padding-top: 50rpx;
	}

	.head-title {
		color: #FFFFFF;
		font-size: 40rpx;
	}

	.search {
		width: 400rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		padding: 10rpx;
		border-radius: 30rpx;
	}

	.content-order {
		background-color: #FFFFFF;
		margin: 20rpx;
		border-radius: 50rpx;
	}

	.order-title {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		border-bottom: 2rpx solid #F5F5F5;
	}

	.title-bold {
		font-weight: bold;
	}

	.title-gray {
		color: #b3afae;
	}

	.order-block {
		display: flex;
		justify-content: space-around;
	}

	.order-icon-btn {
		width: 120rpx;
		padding: 10rpx;
		text-align: center;
	}

	.order-icon-btn image {
		width: 70rpx;
		height: 70rpx;
	}

	.order-icon-btn view {
		color: #666666;
	}

	.order-wuliu {
		margin: 40rpx 30rpx;
		background-color: #F5F5F5;
		border-radius: 20rpx;
		position: relative;
		bottom: 30rpx;
	}

	.wuliu-title {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
	}

	.wuliu-content {
		display: flex;
		padding: 20rpx;
	}

	.wuliu-content-img image {
		width: 100rpx;
		height: 100rpx;
	}

	.wuliu-content-text {
		margin-left: 20rpx;
	}

	.wuliu-content-icon {
		width: 200rpx;
		height: 50rpx;
		padding: 5rpx;
	}

	.wuliu-content-icon image {
		width: 50rpx;
		height: 50rpx;
	}

	.wuliu-content-icon text {
		padding: 20rpx;
		position: relative;
		bottom: 20rpx;
		color: #007AFF;
	}
</style>
